<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .red {
        color: red;
    }

    .green {
        color: green;
    }
</style>

<body>
    <input type="text">
    <button>提交</button>
    <p></p>
    <script>
        var rge = /^[a-zA-Z0-9_-]{6,9}$/
        var inp = document.querySelector('input')
        var btn = document.querySelector("button")
        btn.onclick = function () {
            if (rge.test(inp.value)) {
                document.querySelector('p').innerText = '提交成功'
                document.querySelector('p').className = 'green'
            } else {
                document.querySelector('p').innerText = '提交失败'
                document.querySelector('p').className = 'red'
            }
        }

    </script>
</body>

</html>